<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>angular</title>
    <script src="lib/angular/angular.min.js"></script>
</head>
<style>
    table, th , td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
    }
    table tr:nth-child(odd) {
        background-color: #f1f1f1;
    }
    table tr:nth-child(even) {
        background-color: #ffffff;
    }
</style>
<body>
<div ng-app="json" ng-controller="json_manager">

    <table>
        <tr ng-repeat="x in names | orderBy : 'Country'">
            <td>{{ $index + 1 }}</td>
            <td>{{ x.Name }}</td>
            <td>{{ x.City }}</td>
            <td>{{ x.Country }}</td>
        </tr>
    </table>

</div>

<script>
    var app = angular.module('json', []);
    app.controller('json_manager', function($scope, $http) {
        //console.log(arguments);
        //console.log($http.head('json/customers.json'));
        $http.get('json/customers.json').success(function(response) {
            $scope.names = response['records'];
        });
    });
</script>
</body>
</html>
